<template>
  <up-popup :show="show" round="24rpx" mode="bottom" closeable @close="close">
    <view class="popup-list">
      <view class="popup-title">选择定制产品</view>
      <view class="popup-nav">
        <view class="nav-centent" v-for="(item, index) in list" :key="index">
          <image :src="item.thumb"></image>
          <view class="nav-text">{{item.name}}</view>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
  import {
    ref,
    reactive,
    defineProps,
    defineEmits
  } from 'vue'
  const {
    show
  } = defineProps(['show'])
  const emit = defineEmits(['showClose'])
  const showPopup = ref()
  const list = reactive([{
      thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
      name: '连衣裙'
    },
    {
      thumb: "https://cdn.uviewui.com/uview/goods/2.jpg",
      name: '连衣裙'
    },
    {
      thumb: "https://cdn.uviewui.com/uview/goods/3.jpg",
      name: '连衣裙'
    },
    {
      thumb: "https://cdn.uviewui.com/uview/goods/4.jpg",
      name: '连衣裙'
    },
    {
      thumb: "https://cdn.uviewui.com/uview/goods/5.jpg",
      name: '连衣裙'
    }, {
      thumb: "https://cdn.uviewui.com/uview/goods/3.jpg",
      name: '连衣裙'
    },
    {
      thumb: "https://cdn.uviewui.com/uview/goods/4.jpg",
      name: '连衣裙'
    },
    {
      thumb: "https://cdn.uviewui.com/uview/goods/5.jpg",
      name: '连衣裙'
    }
  ]);

  function close() {
    emit('showClose', false)
  }
</script>

<style lang="less" scoped>
  .popup-list {
    width: 100vw;
    height: 318rpx;
    opacity: 1;
    display: flex;
    flex-direction: column;

    .popup-title {
      width: 100%;
      height: 88rpx;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 88rpx;
      color: rgba(51, 51, 51, 1);
      text-align: center;
    }

    .popup-nav {
      width: 100vw;
      display: flex;
      flex: 1;
      align-items: center;
      box-sizing: border-box;
      padding: 0 20rpx;
      overflow: scroll;
      .nav-centent {
        margin: 0 26rpx;

        image {
          width: 80rpx;
          height: 80rpx;
          opacity: 1;
          border-radius: 20rpx;
        }

        .nav-text {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          margin-top: 12rpx;
          text-align: center;
          white-space: nowrap;

        }
      }
    }
  }
</style>